src/components/Trackpad/MediaKeys.tsx (2)

1-75: Component looks good overall; minor naming concern.

The component is well-structured and consistent with the other key group components. One observation: MediaKeys renders both UTILITY_KEYS (Esc, Tab, Ctrl, Alt, Shift, Meta, Home, End, PgUp, PgDn, Ins, Del) and actual media keys. The name MediaKeys doesn't fully reflect its scope. Consider a more descriptive name like ExtraKeys or KeyboardExtras if you want accuracy, but this is a nit.

---

38-42: isPlaying state can drift from actual remote playback state.

The local isPlaying toggle has no feedback from the remote system. If the remote player's state changes independently (e.g., track ends, another client pauses), this button label will be out of sync. This is likely acceptable for a simple remote, but worth noting.

src/routes/trackpad.tsx (1)

95-102: Ensure the TouchArea wrapper stretches to fill its 1fr row.

The wrapper div at Line 95 relies on CSS Grid's default align-items: stretch to fill the 1fr row. This works, but if any ancestor overrides alignment, the touch area could collapse. Consider adding h-full or min-h-0 on this wrapper for explicitness.

♻️ Defensive fix

-            <div style={{ gridColumn: '1 / -1' }}>
+            <div style={{ gridColumn: '1 / -1' }} className="min-h-0 h-full">

src/routes/trackpad.tsx (1)

139-141: Aggressive focus trapping on blur may hurt accessibility.

The onBlur handler unconditionally re-focuses the hidden input after 10ms, which can trap keyboard focus and prevent users from tabbing to browser controls or other UI elements. Consider gating the re-focus on whether the new document.activeElement is still within the trackpad container.

Proposed improvement

-                onBlur={() => {
-                    setTimeout(() => hiddenInputRef.current?.focus(), 10);
-                }}
+                onBlur={() => {
+                    setTimeout(() => {
+                        const container = hiddenInputRef.current?.closest('[role="application"]');
+                        if (container?.contains(document.activeElement) || document.activeElement === document.body) {
+                            hiddenInputRef.current?.focus();
+                        }
+                    }, 10);
+                }}

src/components/Trackpad/MediaKeys.tsx (1)

8-21: Modifier keys (Ctrl, Alt, Shift, Meta) sent as single taps — limited usefulness for key combos.

These modifier keys are dispatched via sendKey as one-shot { type: 'key' } events, which means there's no press-and-hold semantic for combinations like Ctrl+C. This is likely out of scope for this layout PR, but worth tracking as a follow-up to support modifier + key chords (e.g., via press/release events).

src/components/Trackpad/MediaKeys.tsx (2)

36-39: handlePlayPause is redundant — it's identical to handleInteract(e, "audioplay").

You can remove this handler and wire the Play/Pause button the same way as every other button, reducing duplication.

♻️ Suggested simplification

-    const handlePlayPause = (e: React.PointerEvent) => {
-        e.preventDefault();
-        sendKey("audioplay");
-    };

And on the button:

-                onPointerDown={handlePlayPause}
+                onPointerDown={(e) => handleInteract(e, "audioplay")}

---

7-20: Component name MediaKeys is misleading — it bundles utility/modifier keys with media keys.

UTILITY_KEYS (Esc, Tab, Ctrl, Alt, Shift, Meta, Home, End, PgUp, PgDn, Ins, Del) are navigation and modifier keys, not media keys. Consider renaming to something like ExtraKeys or KeyboardKeys, or splitting into separate components for clarity — especially since the PR's goal is to decompose the old monolithic ExtraKeys into focused, modular components.

src/routes/trackpad.tsx (2)

103-110: Grid item wrapper <div>s are unnecessary — the child components can be grid items directly.

Each section is wrapped in a plain <div> solely to apply gridColumn. You could apply these styles directly to the child components (or wrap them with a styled fragment) to reduce DOM nesting. Not blocking, just a cleanliness note.

♻️ Example for TouchArea

-            <div style={{ gridColumn: '1 / -1' }}>
-                <TouchArea
-                    isTracking={isTracking}
-                    scrollMode={scrollMode}
-                    handlers={handlers}
-                    status={status}
-                />
-            </div>
+            <TouchArea
+                isTracking={isTracking}
+                scrollMode={scrollMode}
+                handlers={handlers}
+                status={status}
+                style={{ gridColumn: '1 / -1' }}
+            />

This would require the child components to forward the style prop (or accept a className). If that's too invasive, the wrappers are fine as-is.

Also applies to: 111-120, 121-131

---

92-98: Consider using Tailwind grid utilities instead of inline style for the template.

The column template is static (repeat(6, 1fr)) and can be expressed as grid-cols-6. The row template is dynamic based on showKeyboard, which justifies inline style, but you could also use a conditional className. Minor consistency point with the rest of the Tailwind-based styling.

♻️ Partial migration

-            className="grid h-full overflow-hidden"
-            style={{
-                gridTemplateColumns: 'repeat(6, 1fr)',
-                gridTemplateRows: showKeyboard
-                    ? '1fr auto auto auto'
-                    : '1fr auto auto',
-            }}
+            className={`grid grid-cols-6 h-full overflow-hidden ${
+                showKeyboard
+                    ? '[grid-template-rows:1fr_auto_auto_auto]'
+                    : '[grid-template-rows:1fr_auto_auto]'
+            }`}

src/components/Trackpad/ArrowKeys.tsx (1)

9-22: Component name vs. contents mismatch is minor but worth noting.

ArrowKeys contains Esc, Tab, Ctrl, Alt, Shift, Meta, Del, and PrtSc alongside the actual arrow keys. A name like UtilityKeys or NavKeys would better describe the contents. Not blocking since this follows the reviewer's guidance to merge utility and arrow keys into one component.

src/components/Trackpad/MediaKeys.tsx (1)

28-36: Consider adding aria-label for icon-only buttons.

title provides a tooltip but screen readers generally rely on aria-label for button purpose. Since these buttons have no visible text, adding aria-label={label} improves accessibility.

♻️ Proposed fix

                 <button
                     key={key}
                     type="button"
                     className="btn btn-sm min-w-0"
                     onPointerDown={(e) => handleInteract(e, key)}
                     title={label}
+                    aria-label={label}
                 >

src/routes/trackpad.tsx (1)

92-96: Parent grid-cols-6 is unused — every child spans all 6 columns.

Since all children use gridColumn: '1 / -1', the 6-column definition at the parent level has no effect. The sub-components define their own internal 6-column grids. You could simplify the parent to just grid (single column) with the row template, which would make the intent clearer and remove the need for gridColumn: '1 / -1' on every child.

♻️ Simplified parent grid

-            className={`grid grid-cols-6 h-full overflow-hidden ${
+            className={`grid h-full overflow-hidden ${
                 showKeyboard
-                    ? '[grid-template-rows:1fr_auto_auto_auto_auto]'
-                    : '[grid-template-rows:1fr_auto]'
+                    ? '[grid-template-rows:1fr_auto_auto_auto_auto]'
+                    : '[grid-template-rows:1fr_auto]'
             }`}

Then remove style={{ gridColumn: '1 / -1' }} from each child component.